<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./output.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.7.7/handlebars.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

</head>

<body class="bg-gray-100">
    <script id="people-template" type="text/x-handlebars-template">
    <h2 class="text-center text-3xl font-bold text-gray-800 my-10"> first:pt-0, last:pb-0</h2>
    <div class="flex items-start justify-center ">
        <ul role="list" class="p-6 divide-y divide-slate-200 max-w-[350px] ">
            {{#each people as |person|}}
            <!-- Remove top/bottom padding when first/last child -->
            <li class="flex py-10 first:pt-0 last:pb-0 rounded-lg shadow-lg bg-white">
                <img class="h-10 w-10 rounded-full" src="{{person.imageUrl}}" alt="" />
                <div class="ml-3 overflow-hidden">
                    <p class="text-sm font-medium text-slate-900">{{person.name}}</p>
                    <p class="text-sm text-slate-500 truncate">{{person.email}}</p>
                </div>
            </li>
            {{/each}}
        </ul>
    </div>

    <h2 class="text-center text-3xl font-bold text-gray-800 my-10"> odd:bg-white, even:bg-slate-400</h2>
    <div class=" flex items-center justify-center ">
        <table class="table-auto w-full max-w-[1000px] items-center justify-center " id="myTable">
            <thead class=" bg-gray-100 ">
                <th>Name</th>
                <th>Title</th>    
                <th>Email</th>    
            </thead>
            <tbody>
                {{#each people as |person|}}
                <!-- Use a white background for odd rows, and slate-50 for even rows -->
                <tr class="odd:bg-white even:bg-slate-400">
                    <td>{{person.name}}</td>
                    <td>{{person.title}}</td>
                    <td>{{person.email}}</td>
                </tr>
                {{/each}}
            </tbody>
        </table>
    </div>
    
    <h2 class="text-center text-3xl font-bold text-gray-800 my-10"> 
        required、invalid 和 disabled 
    </h2>
    <!-- 表单 -->
    <div class="flex items-center justify-center my-10 ">
    <form class="min-w-[400px]" action="#myForm" id="myForm">
        <div class="form-group my-2">
            <label class="block">
            <span class="block text-sm font-medium text-slate-700">Username</span>
            <!-- Using form state modifiers, the classes can be identical for every input -->
            <input type="text"  placeholder="Enter your username" disabled 
                class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 
                 rounded-md text-sm shadow-sm placeholder-slate-400
                focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
                disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 
                disabled:shadow-none invalid:border-pink-500 invalid:text-pink-600
                focus:invalid:border-pink-500 focus:invalid:ring-pink-500
            "/>
            </label>
        </div>
        <div class="form-group my-2">
            <label class="block">
            <span class="block text-sm font-medium text-slate-700">Email</span>
            <!-- Using form state modifiers, the classes can be identical for every input -->
            <input type="text" value="" placeholder="Enter your email"  disabled 
            class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 
            rounded-md text-sm shadow-sm placeholder-slate-400
            focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
            disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 
            disabled:shadow-none
            invalid:border-pink-500 invalid:text-pink-600
            focus:invalid:border-pink-500 focus:invalid:ring-pink-500
            "/>
            </label>
        </div>
        <div class="form-group my-2">
            <label class="block">
            <span class="block text-sm font-medium text-slate-700">Password</span>
            <!-- Using form state modifiers, the classes can be identical for every input -->
            <input type="password" value="tbone" disabled class="mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400
                focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500
                disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none
                invalid:border-pink-500 invalid:text-pink-600
                focus:invalid:border-pink-500 focus:invalid:ring-pink-500
            "/>
            </label>
        </div>
        <div class=" my-2 ml-auto">
            <button class="btn btn-primary  w-[100px] h-[30px] text-center text-white bg-sky-900 rounded-md hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2">Save changes</button>
        </div>
        <!-- ... -->
    </form>
    </div>
  


    </script>
    <script>
        const renderPeople = function () {
            try {
                // 定义数据
                const people = [
                    {
                        imageUrl: "https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
                        name: "Kristen Ramos",
                        title: "Regional Paradigm Technician",
                        email: "kristen.ramos@example.com"
                    },
                    {
                        imageUrl: "https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
                        name: "Floyd Miles",
                        title: "Product Directives Officer",
                        email: "Floyd.Miles@example.com"
                    },
                    {
                        imageUrl: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
                        name: "Courtney Henry",
                        title: "Senior Designer",
                        email: "Courtney.Henry@example.com"
                    },
                    {
                        imageUrl: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80",
                        name: "Ted Fox",
                        title: "VP, Hardware Engineering",
                        email: "Ted.Fox@example.com"
                    }
                ];
                const source = document.getElementById('people-template').innerHTML;
                const template = Handlebars.compile(source);
                const html = template({ people });
                document.body.insertAdjacentHTML('beforeend', html);
            } catch (error) {
                console.error('Error compiling Handlebars template:', error);
            }
        };
        document.addEventListener('DOMContentLoaded', function () {
            if (typeof Handlebars === 'undefined') {
                setTimeout(renderPeople, 100);
            } else {
                renderPeople();
            }
        });
    </script>
</body>

</html>